<template>
  <div class="content">
    <div class="column1">
      <h2>驱动列表</h2>
      <el-button type="primary" @click="handleAddDriver">+ 添加驱动</el-button>
      <el-table :data="driveData" row-key="id" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        style="width: 100%;margin-top: 20px;">
        <el-table-column prop="driverName" label="驱动名称">
          <template #default="scope">
            <el-radio v-model="selectedDriverId" :label="scope.row.id" @change="handleDriverSelect(scope.row)">
              {{ '' }}
            </el-radio>
            {{ scope.row.driverName }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="small" type="primary" @click="handleEdit(scope.row)">修改</el-button>
            <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="column2">
      <el-table style="width: 100%;margin-top: 20px;">
        <el-table-column prop="sort" label="排序" width="60"></el-table-column>
        <el-table-column prop="deviceName" label="设备配置名称"></el-table-column>
        <el-table-column prop="description" label="设备描述"></el-table-column>
        <el-table-column prop="defaultValue" label="默认值"></el-table-column>
        <el-table-column prop="notes" label="备注"></el-table-column>
        <el-table-column prop="type" label="类型"></el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="small" type="primary" @click="handleEdit(scope.row)">修改</el-button>
            <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

interface DriverItem {
  id: number
  driverName: string
  children?: DriverItem[]
  hasChildren?: boolean
}
// 选中的驱动ID
const selectedDriverId = ref<number | null>(null)
// 驱动数据
const driveData = ref<DriverItem[]>([
  {
    id: 1,
    driverName: '西门子',
    hasChildren: true,
    children: [
      {
        id: 11,
        driverName: 'S200Smart'
      },
      {
        id: 12,
        driverName: 'S1200'
      },
      {
        id: 13,
        driverName: 'S1500'
      }
      ,
      {
        id: 14,
        driverName: 'S200'
      }
      ,
      {
        id: 15,
        driverName: 'S300'
      }
      ,
      {
        id: 16,
        driverName: 'S400'
      }
      ,
      {
        id: 17,
        driverName: 'S7PLUS'
      }
    ]
  },
  {
    id: 2,
    driverName: 'modbus',
    hasChildren: true,
    children: [
      {
        id: 21,
        driverName: 'ModbusRtu'
      },
      {
        id: 22,
        driverName: 'ModbusTcp'
      },
      {
        id: 23,
        driverName: 'ModbusUdp'
      },
      {
        id: 24,
        driverName: 'ModbusAscii'
      },
      {
        id: 25,
        driverName: 'ModbusAsciiOverTcp'
      },
      {
        id: 26,
        driverName: 'ModbusRtuOverTcp'
      }
    ]
  },
  {
    id: 3,
    driverName: 'OPC',
    hasChildren: true,
    children: [
      {
        id: 31,
        driverName: 'OpcUaClient'
      },
      {
        id: 32,
        driverName: 'OpcDaClient'
      }
    ]
  }
])
// 添加主驱动
const handleAddDriver = () => {
  const newDriver: DriverItem = {
    id: Date.now(),
    driverName: '新驱动',
    children: []
  }
  driveData.value.push(newDriver)
}
// 驱动选择事件
const handleDriverSelect = (driver: DriverItem) => {
  console.log('选中驱动:', driver)
  // 这里可以执行选中后的操作，比如加载驱动配置等
}
// 编辑操作
const handleEdit = (row: DriverItem) => {
  console.log('编辑行数据:', row)
  // 这里可以打开编辑对话框
  selectedDriverId.value = row.id
}
// 删除驱动
const handleDelete = async (row: DriverItem) => {
  try {
    // 确认删除对话框
    // await ElMessageBox.confirm(
    //   `确定要删除驱动 "${row.driverName}" 吗？`,
    //   '删除确认',
    //   {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: 'warning',
    //   }
    // )

    // 如果删除的是当前选中的驱动，清空选中状态
    if (selectedDriverId.value === row.id) {
      selectedDriverId.value = null
    }
    // 递归删除函数
    const deleteDriver = (drivers: DriverItem[], id: number): boolean => {
      for (let i = 0; i < drivers.length; i++) {
        if (drivers[i].id === id) {
          drivers.splice(i, 1)
          return true
        }
        if (drivers[i].children) {
          if (deleteDriver(drivers[i].children!, id)) {
            return true
          }
        }
      }
      return false
    }

    deleteDriver(driveData.value, row.id)
    console.log('驱动删除成功:', row.driverName)

  } catch (error) {
    console.log('取消删除', error)
  }
}
</script>

<style scoped>
.content {
  width: 100%;
  height: 100%;
  display: flex;
  font-size: 14px;
}

.column1 {
  width: 30%;
  padding: 20px;
  background-color: #ffffff;
  margin-right: 10px;
}

h2 {
  margin-bottom: 10px;
}

.column2 {
  width: 70%;
  padding: 20px;
  background-color: #ffffff;
}

.table-container {
  margin-top: 20px;
}

/* 表格样式调整 */
:deep(.el-table) {
  border: 1px solid #ebeef5;
}

:deep(.el-table th) {
  background-color: #f5f7fa;
  color: #101010;
  font-weight: 600;
}

:deep(.el-table td) {
  padding: 12px 0;
}

:deep(.el-button) {
  margin-right: 8px;
}
</style>
